import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';

/**
 // Setup Store 中： ref() 就是 state 属性  computed() 就是 getters function() 就是 actions
 // 可以在组件中的任意位置访问 `store` 变量 ✨
 import { useCounterStore } from '@/stores/counter'
 const store = useCounterStore()

 //解构
 import { storeToRefs } from 'pinia'
 const store = useCounterStore()
 // `name` 和 `doubleCount` 是响应式的 ref
 // 同时通过插件添加的属性也会被提取为 ref
 // 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
 const { name, doubleCount } = storeToRefs(store)
 // 作为 action 的 increment 可以直接解构
 const { increment } = store
 */
export const useAppStore = defineStore('keepALiveNames', () => {
  const device = useStorage('device', 'desktop'); // mobile
  const drawer = useStorage('device', false);
  const cacheComponents = ref([]);
  return {
    device, drawer, cacheComponents
  };
});
